function main() {
  var innerLeftHtmlStr = ''
  var innerRightHtmlStr = ''
  for(var i=0;i<number1;i++){
    innerLeftHtmlStr += `<div class="time-container seconds">     
    <div class="digit">
      <div class="fade">&nbsp;</div>
      <span class="num top num-ones-top" id="">0</span>
      <span class="num bottom num-ones-bottom" id="">
        <div class="bottom-container">0</div></span>
        <div class="swapper">
          <div id="" class="top-num-ones-anim num-anim top-anim" style="display:none;">
            <div class="top-half-num">0</div>
          </div>
          <div id="" class="bottom-num-ones-anim num-anim bottom-anim" style="display:none;">
            <div class="bottom-half-num">
              <div class="dropper">0</div></div>
          </div>
      </div>
      <div class="ring ring-left"></div>
      <div class="ring ring-right"></div>
    </div>
  </div>`
  }

  for(var i=0;i<=number2;i++){
    if(i==2){
      innerRightHtmlStr += '<div id="showPonit" class="b" style="color:#0068b7;font-size: 2rem;font-weight: bold;">.</div>'
    } else{
        innerRightHtmlStr += `<div class="time-container seconds">     
        <div class="digit">
          <div class="fade">&nbsp;</div>
          <span class="num top num-ones-top" id="">0</span>
          <span class="num bottom num-ones-bottom" id="">
            <div class="bottom-container">0</div></span>
            <div class="swapper">
              <div id="" class="top-num-ones-anim num-anim top-anim" style="display:none;">
                <div class="top-half-num">0</div>
              </div>
              <div id="" class="bottom-num-ones-anim num-anim bottom-anim" style="display:none;">
                <div class="bottom-half-num">
                  <div class="dropper">0</div></div>
              </div>
          </div>
          <div class="ring ring-left"></div>
          <div class="ring ring-right"></div>
        </div>
      </div>`
    }    
  }

  innerLeftHtmlStr += '<div style="color:#0068b7;font-size: 2rem;font-weight: bold;">户</div>'
  innerRightHtmlStr += '<div class="b" style="color:#0068b7;font-size: 2rem;font-weight: bold;">%</div>'
  $('.innerLeft').html(innerLeftHtmlStr)
  $('.innerRight').html(innerRightHtmlStr)
    updateTime();
    setInterval(updateTime, 10000);
}


function updateTime() {
    //2019年份计划
    var url = $("#city").text()+'&district='+$("#zhen").text().replace(">","")+'&town='+$("#cun").text().replace(">","");
    if("韩城市" == $("#city").text()){
        url = $("#city").text()+'&district='+$("#city").text()+'&town='+$("#zhen").text().replace(">","");
    }
    $.ajax({
        type: "get",
        url: basePath + '/service/smzl/residentcoal/getCoalDateScal?year=2019&all=1&city='+url,
        async: true,
        dataType: "json",
        success: function (map) {
            $("#num3").text(map.data[0].countAll);
            var x =  map.data[0].ready;
            var y =  map.data[0].percent;
            var text = x+"";
            for(var i=0;i<number1-text.length;i++){
                x="0"+x;
            }
            y=y.toFixed(1).replace(".","");
            if(y.length==4){
                y=y.substring(0,3);
            }
            if(y.length==2){
                y="0"+y;
            }
            setTimes(x, y);
        }
    });
}

let num = 0
function setTimes(x,y) {
    var  LefttopAry = $('.centerLeftRoll .num-ones-top')
    var  rightTopAry = $('.centerRightRoll .num-ones-top')
    for(var i=0;i<LefttopAry.length;i++){
        setTime('.innerLeft ', $(LefttopAry[i]).text() ,x[i], i);
    }
    if(y=='100'){
    	$("#showPonit").hide();
    }else{
    	$("#showPonit").show();  
    }
    for(var i=0;i<rightTopAry.length;i++){
        setTime('.innerRight ',$(rightTopAry[i]).text() ,y[i], i);
    }
}

function setTime(type,previousTime, newTime, sub) {
  if (previousTime === newTime||previousTime==undefined||newTime==undefined) {
    return;
  }
  setTimeout(function() {
    $($( type + '.num-ones-top')[sub]).text(newTime)
  }, 150);
  setTimeout(function() {
  $('.bottom-container',$($(type + '.num-ones-bottom')[sub])).text(newTime)
  }, 365);
  animateTime(type,previousTime, newTime, sub);
}

function animateTime(type,previousTime, newTime, sub) {
  var top, bottom;
  top =  $($(type + '.top-num-ones-anim')[sub])
  bottom =$($(type + '.bottom-num-ones-anim')[sub])

  $(type + '.top-half-num', top).text(previousTime);
  $(type + '.dropper', bottom).text(newTime);
  top.show();
  bottom.show();
  $($(type + '.top-num-ones-anim')[sub]).css('visibility', 'visible');
  $($(type + '.bottom-num-ones-anim')[sub]).css('visibility', 'visible');
  animateNumSwap(type,sub);
  setTimeout(function() {hideNumSwap(type,sub);}, 365);
}

function animateNumSwap(type,sub) {
  $($(type + '.top-num-ones-anim')[sub]).toggleClass('up');
  $($(type + '.bottom-num-ones-anim')[sub]).toggleClass('down');
}

function hideNumSwap(type,sub) {
  $($(type + '.top-num-ones-anim')[sub]).toggleClass('up');
  $($(type + '.bottom-num-ones-anim')[sub]).toggleClass('down');
  $($(type + '.top-num-ones-anim')[sub]).css('visibility', 'hidden');
  $($(type + '.bottom-num-ones-anim')[sub]).css('visibility', 'hidden');
}

$(document).ready(main);


window.requestAnimFrame = (function(callback){ 
    return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function(callback){ window.setTimeout(callback, 1000 / 60); }
})();